<template>
	<!-- 商城 -->
	<view>
		<!-- 顶部区域 -->
		<view class="topnav">
			<!-- 搜索 -->
			<view class="searchs">
				<view class="search">
					<view class="search_main">
						<image src="/static/images/mall/search.png" @click="onSearch"></image>
						<input type="text" confirm-type="search" v-model="key_word" @input="onInput" @confirm="onSearch" placeholder="输入商品关键字搜索" placeholder-style="color:#FFFFFF;font-size:26rpx" />
					</view>
					<text @click="onSearch">搜索</text>
				</view>
				<!-- <image src="/static/images/blindbox/kefu.png" class="msgicon"></image> -->
			</view>
			<!-- banner -->
			<banner :bannerList="bannerList" @navDetails="navDetails" />
		</view>
		<!-- 商品分类 -->
		<view class="cate">
			<swiper class="swiper" :duration="500" @change="bannercg">
				<swiper-item v-for="(list,i) in cateList" :key="i">
					<view class="goodsCategroy">
						<block v-for="(item,index) in list" :key="index">
							<navigator class="goodsCategroy_item" :url="`/pages/blindbox/allgoods?id=${item.id}&name=${item.name}`">
								<image :src="item.image"></image>
								<text>{{item.name}}</text>
							</navigator>
						</block>
					</view>
				</swiper-item>
			</swiper>
			<view class="cate-inter">
				<view class="cate-inter-item" @click="setActive(bindex)" :class="{'cate-inter-active': cateindex == bindex}"  v-for="(cate,bindex) in cateList" :key="bindex"></view>
			</view>
		</view>
		<!-- 积分兑换 -->
		<view class="integralmain">
			<view class="goodstop">
				<view class="goodstop_left">
					<image src="/static/images//minecenter/jifen.png"></image>
					<view class="goodstop_left_text">
						<text class="goodstop_left_text_title">积分兑换</text>
						<text class="goodstop_left_text_desc">积分在线兑换超值商品</text>
					</view>
				</view>
				<navigator class="goodstop_right" url="/pages/blindbox/allgoods_integral">
					<text>全部商品</text>
					<image src="/static/images/mall/more.png"></image>
				</navigator>
			</view>
			<integral :goodsList="integralGoodsList" goodsType="2" />
		</view>
		<!-- 精选商品 -->
		<view class="goodsmain">
			<view class="goodstop">
				<image src="/static/images//minecenter/jingxuan.png"></image>
				<view class="goodstop_text">
					<text class="goodstop_text_title">精选商品</text>
					<text class="goodstop_text_desc">优选好物 精选抢不停</text>
				</view>
			</view>
			<goodslist :goodsList="goodsList" goodsType="1" />
		</view>
		<!-- 加载更多 -->
		<pullDownRefresh :status="loading" style="padding-bottom: 130rpx;" />
		<!-- 底部导航 -->
		<tabBar :currentPage="2" :messageNum="messageNum" />
	</view>
</template>

<script>
	import tabBar from '@/components/tabBar'
	import banner from '@/components/banner'
	import goodslist from '@/components/goodslist'
	import integral from '@/components/goodslist/index_integral'
	import tabFilter from '@/components/tabFilter'
	import pullDownRefresh from '@/components/pullDownRefresh'
	export default {
		components:{
			tabBar,
			banner,
			goodslist,
			integral,
			tabFilter,
			pullDownRefresh
		},
		data() {
			return {
				cateindex: 0,
				cateList:[],
				bannerList:[],
				goodsCateList:[],//商品分类列表
				goodsList:[],//普通商品列表
				integralGoodsList:[],//积分商品列表
				loading:0,
				page:1,
				key_word:'',
				accessId: 'b9f99880-f392-11ec-818d-a59265127335', // 接入号ID （参数类型：字符串，必传）
				clientId: '', //访客id
				urlTitle: '', //用户来源
				fromUrl: '', //用户来源
				otherParams: { //指定专属坐席和用户昵称以及发送商品链接
					nickName: ''
				},
				customField: { //自定义字段
					test: '在线客服自定义字段'
				},
				messageNum:0
			}
		},
		onLoad() {
			uni.showLoading({
				title:'加载中...'
			})
			this.getShopbanner();
			this.getShopgoodscategory();
			this.getGoodslist();
			this.getIntegralGoodslist();
		},
		onShow() {
			if(uni.getStorageSync('token')){
				this.getMyindex();
			}
		},
		onPullDownRefresh() {
			uni.showLoading({
				title:'加载中...'
			})
			this.page = 1;
			this.goodsList = [];
			this.getShopbanner();
			this.getShopgoodscategory();
			this.getGoodslist();
			this.getIntegralGoodslist();
		},
		onReachBottom() {
			this.page++;
			this.getGoodslist();
		},
		methods: {
			//客服
			toService() {
				if(!uni.getStorageSync('token')){
					uni.showModal({
						title: '温馨提示',
						content: '登录后可继续操作，是否登录？',
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/login/login'
								})
							}
						}
					})
				}else{
					// this.clientId = uni.getStorageSync('userId');
					// this.otherParams.nickName = uni.getStorageSync('userName');
					// let hrefAddress = 'https://ykf-webchat.7moor.com/wapchat.html?accessId=' + this.accessId + '&clientId=' +
					// 	this.clientId + '&otherParams=' + JSON.stringify(this.otherParams) +
					// 	'&urlTitle=派箱箱APP&fromUrl=https://mh.mytshop.cn/h5/&customField=' + JSON.stringify(this.customField);
					// uni.navigateTo({
					// 	url: '/pages/index/customerService?href=' + encodeURIComponent(hrefAddress)
					// })
				}
			},
			bannercg(e){
				this.cateindex = e.detail.current;
			},
			setActive(index){
				this.cateindex = index;
			},
			getMyindex(){
				this.$api.myindex().then(res=>{
					this.messageNum = res.message_num;
					uni.setStorageSync('userName',res.user.user_name);
					uni.setStorageSync('userId',res.user.id);
				})
			},
			//获取普通商品分类列表
			getShopgoodscategory(){
				this.$api.shopgoodscategory().then(res=>{
					this.goodsCateList = res;
					if(this.goodsCateList.length>8){
						let arr1 = this.goodsCateList.slice(0,8);
						let arr2 = this.goodsCateList.slice(8);
						this.cateList = [arr1,arr2];
					}else{
						this.cateList = [this.goodsCateList];
					}
					
				})
			},
			onInput({detail:{value}}){
				if(value === ''){
					this.page = 1;
					this.key_word = '';
					this.goodsList = [];
					this.getGoodslist();
				}
			},
			//搜索
			onSearch(){
				this.page = 1;
				this.goodsList = [];
				this.getGoodslist();
			},
			//获取商品轮播
			getShopbanner(){
				this.$api.shopbanner().then(res=>{
					this.bannerList = res;
				})
			},
			//跳转商品详情
			navDetails(url){
				uni.navigateTo({url})
			},
			//获取精选商品列表
			getGoodslist(){
				this.loading = 1;
				this.$api.shopallgoods({
					offset:this.page,
					type:1,
					key_word:this.key_word
				}).then(res=>{
					uni.stopPullDownRefresh();
					uni.hideLoading();
					if(res.length>0){
						this.loading = 0;
						this.goodsList = this.goodsList.concat(res);
					}else{
						this.loading = 3;
						// uni.showToast({
						// 	title:'没有更多了~',
						// 	icon:'none'
						// })
					}
				})
			},
			//获取积分商品列表
			getIntegralGoodslist(){
				this.$api.shopallgoods({
					offset:this.page,
					type:2
				}).then(res=>{
					this.integralGoodsList = res.slice(0,3);
				})
			}
		}
	}
</script>

<style lang="scss">
page{
	padding-bottom: 68rpx;
}
.topnav{
	width: 750rpx;
	background-image: url("@/static/images/oneImage/beijingw.png");
	background-size: 100% 100%;
	box-sizing: border-box;
}
.searchs{
	@include between;
	padding: calc(var(--status-bar-height) + 24rpx) 24rpx 24rpx;
	
	.search{
		width: 572rpx;
		height: 60rpx;
		background: rgba(0, 0, 0, 0.2);
		border-radius: 30rpx;
		font-size: 26rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		@include between;
		
		&_main{
			padding: 14rpx 20rpx;
			@include align-center;
			
			image{
				width: 29rpx;
				height: 31rpx;
				margin-right: 15rpx;
			}
		}
		text{
			width: 104rpx;
			height: 64rpx;
			background: linear-gradient(#FACA68, #FE240B);
			border-radius: 32rpx;
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			@include center;
		}
	}
	.msgicon{
		width: 74rpx;
		height: 74rpx;
	}
}
.cate{
	width: 750rpx;
	margin: 0 auto;
	position: relative;
	
	.swiper{
		height: 430rpx;
	}
	&-inter{
		width: 140rpx;
		height: 10rpx;
		background: #CCCCCC;
		border-radius: 5rpx;
		position: absolute;
		left: 50%;
		bottom: 24rpx;
		transform: translateX(-50%);
		z-index: 9;
		@include center;
		
		&-item{
			width: 70rpx;
			height: 10rpx;
			transition: all 0.4s;
		}
		&-active{
			width: 70rpx;
			height: 10rpx;
			background: #5E42FF;
			border-radius: 5rpx;
		}
	}
}
.goodsCategroy{
	width: 750rpx;
	height: 430rpx;
	background-color: #FFFFFF;
	padding: 32rpx 24rpx 0;
	display: flex;
	flex-wrap: wrap;
	
	.goodsCategroy_item{
		margin: 8rpx 100rpx 44rpx 0;
		@include column-center;
		
		image{
			width: 95rpx;
			height: 95rpx;
			border-radius: 50%;
		}
		text{
			width: 96rpx;
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #333333;
			text-align: center;
			margin-top: 10rpx;
		}
		&:nth-child(4n){
			margin-right: 0;
		}
	}
}
.integralmain{
	width: 750rpx;
	// background: linear-gradient(360deg, #F7F7F7 0%, #FEF0E6 100%);
	margin-top: 40rpx;
	
	.goodstop{
		@include between;
		padding: 20rpx;
		
		&_left{
			@include align-center;
			
			image{
				width: 90rpx;
				height: 50rpx;
			}
			&_text{
				@include align-end;
				
				&_title{
					font-size: 32rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
				}
				&_desc{
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					margin-left: 12rpx;
				}
			}
		}
		&_right{
			@include align-center;
			
			text{
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
			}
			image{
				width: 42rpx;
				height: 42rpx;
			}
		}
	}
}
.goodsmain{
	width: 750rpx;
	
	.goodstop{
		@include align-center;
		padding: 24rpx;
		
		image{
			width: 70rpx;
			height: 70rpx;
		}
		&_text{
			@include align-end;
			
			&_title{
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
			}
			&_desc{
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				margin-left: 12rpx;
			}
		}
	}
}
</style>
